<template>
    <MyCard>
        <el-space>
            <span>状态:</span>
            <el-select placeholder="请选择">
                <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
            <span>搜索:</span>
            <el-input placeholder="请输入姓名或账号" clearable>
            </el-input>
            <el-button type="primary">查询</el-button>
        </el-space>
    </MyCard>
    <MyCard>
        <el-button type="primary" style="margin-bottom: var(--card-space);"
            @click="onConfirmBtn?.openDialog()">添加管理员</el-button>
        <MyTable :columns="columns" :data="adminData.rows">
            <template #action="{ row }">
                <el-button link style="border: none;" type="primary"
                    @click="onConfirmBtn?.openDialog(row)">编辑</el-button>
                <el-button link style="border: none;" type="danger" @click="deleteAdmin(row._id)">删除</el-button>
            </template>
            <template #state="scoped">
                <el-switch v-model="scoped.row.state" :active-value="1" :inactive-value="0" />
            </template>
        </MyTable>
        <div class="flex-end" style="margin-top: 22px;">
            <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                :page-sizes="[10, 20, 30]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                :total="adminData.total" />
        </div>
    </MyCard>
    <adminForm ref="openDialog" @getAdmin='getAdmin'></adminForm>
</template>
686f2fdd0b991e21ee16fc06
<script setup lang="ts">
import { onMounted, ref, useTemplateRef, watch } from 'vue';
import adminForm from './adminForm.vue'
import { deleteAdminApi, getAdminApi } from '@/api/adminManage';
// import { useFindData } from '@/composables/findData';
const adminData = ref<any>({});
const columns = [
    { label: '名字', prop: 'name' },
    { label: '账号', prop: 'account' },
    { label: '密码', prop: 'password' },
    { label: '角色', prop: 'roleId.name' },
    { label: '状态', prop: 'state' },
    { label: '操作', prop: 'action', width: 240 },
];
const options = ref([
    { id: 1, label: '全部', value: 0 },
    { id: 2, label: '开启', value: 1 },
    { id: 3, label: '关闭', value: 2 },
]);

// const { adminData, getAdminJoint } = useFindData();
onMounted(() => {
    getAdmin();
})

const onConfirmBtn: any = useTemplateRef('openDialog');
const pageData = ref({
    currentPage: 1,
    pageSize: 10,
})
watch([pageData,], () => {
    getAdmin();
}, { deep: true })
onMounted(() => {
    getAdmin();
})
watch([pageData,], () => {
    getAdmin();
}, { deep: true })
function deleteAdmin(_id: string) {
    ElMessageBox.confirm(
        '权限数据删除后不可恢复，确认删除?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteAdminApi({
                _id,
            })
                .then((res) => {
                    if (res.code == 200) {
                        ElMessage.success('删除成功!');
                        getAdmin();
                    } else {
                        ElMessage.error(res.message);
                    }
                })
        })
        .catch(() => { })
}

function getAdmin() {
    getAdminApi({ ...pageData.value, creator: 'zhangjunling' }).then(res => {
        if (res.code == 200) {
            adminData.value = res.data
        }
    })
}

</script>

<style scoped>
.el-input,
.el-select {
    width: 250px;

}
</style>